import h from './mysnabbdom/h'
import patch from './mysnabbdom/patch'
  const vnode1 = h('ul', {}, [
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
  ])
  const vnode2 = h('ul', {}, [
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
    h('li', {key: 'D'}, 'D')    
])

/**
 * diff处理新旧节点不是同一个节点
 *  1. 判断老节点是虚拟节点还是DOM节点
 *      - 如果是DOM节点，则将节点包装为虚拟节点
 *      - 如果是虚拟节点，则判断新老节点是否为同一节点
 *          -- 如何判断新旧节点是否为同一个节点？
 *              --- 新旧节点的key和选择器都相同，则diff进行精细化比较，做最小量更新
 *              --- 如果不相同，则需要创建新节点，然后替换container（其中创建子节点是通过递归来创建的
 * 
 *  2. 是相同节点，且key相同时，新旧节点的key和选择器都相同，则diff进行精细化比较，做最小量更新
 *      - 如果新旧节点对象完全没有发生改变，则不用做任何处理
 *      - 如果新旧节点对象发生了改变
 *          -- 判断新节点有没有text属性
 *            --- 如果有text
 *              ---- 新旧节点的text是否相同
 *                  ----- 如果相同，则不做任何处理
 *                  ----- 如果不同，把elm中的innerText改变为newVnode的text
 *            --- 如果没有text（说明有子节点children）
 *              ---- oldVnode有没有子节点children
 *                  ----- 如果没有，将oldVnode中的text清空，且将newVnode中的子节点children节点添加到DOM中
 *                  ----- 如果有，此时新老节点同时存在children
 * 
 *  3. diff算法优化策略
 *      - 四种命中查找：
 *          -- 新前与旧前
 *          -- 新后与旧后
 *          -- 新后与旧前
 *          -- 新前与旧后
 * 
 *  4. diff四种命中查找判断之后，还有剩余项
 *      - 如果是旧节点先循环完毕
 *          -- 有剩下的新节点需要添加到旧节点上
 *      - 如果是新节点先循环完毕
 *          -- 旧DOM上有节点需要删除
*/

// 测试1： 文本
// const myVnode1 = h('h1', {}, '你好')

// 测试2： 子节点
// const myVnode1 = h('ul', {}, [
//     h('li', {key: 'A'}, 'A'),
//     h('li', {key: 'B'}, 'B'),
//     h('li', {key: 'C'}, 'C'),
//     h('li', {key: 'D'}, h('ol', {key: 'dOl'}, [
//         h('li', {key: 'D1'}, 'D1'),
//         h('li', {key: 'D2'}, 'D2'),
//         h('li', {key: 'D3'}, 'D3'),
//     ]))
// ])

// 测试3： 新老节点children不同
const myVnode1 = h('ul', {}, [
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
    h('li', {key: 'D'}, 'D'),
    h('li', {key: 'E'}, 'E')
])
const container = document.getElementById('container')
// 第1次上树
patch(container, myVnode1)

// 新节点
const myVnode2 = h('ul', {}, [
    h('li', {key: 'Q'}, 'Q'),
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
    h('li', {key: 'D'}, 'D'),
    h('li', {key: 'E'}, 'E')
])
const btn = document.getElementById('btn')
btn.onclick = () => {
    patch(myVnode1, myVnode2)
}